<template>
  <div class="fullscreen-demo">
    <div class="demo-header">
      <h1>全屏显示组件演示</h1>
      <p>体验不同的全屏显示模式和功能</p>
    </div>

    <div class="demo-grid">
      <!-- 基础全屏演示 -->
      <div class="demo-card">
        <h3>基础全屏模式</h3>
        <p>点击按钮进入全屏，支持ESC和F11快捷键</p>
        <FullscreenView title="基础全屏演示">
          <div class="demo-content basic">
            <n-icon size="80" color="#10b981">
              <Maximize />
            </n-icon>
            <h2>基础全屏模式</h2>
            <p>这是一个基础的全屏显示示例</p>
            <div class="feature-list">
              <n-tag type="success">✓ 跨浏览器兼容</n-tag>
              <n-tag type="success">✓ 键盘快捷键</n-tag>
              <n-tag type="success">✓ 响应式布局</n-tag>
            </div>
          </div>
        </FullscreenView>
      </div>

      <!-- 自动进入全屏演示 -->
      <div class="demo-card">
        <h3>自动全屏模式</h3>
        <p>组件加载时自动进入全屏状态</p>
        <n-button type="primary" @click="showAutoFullscreen = true">
          启动自动全屏演示
        </n-button>
        
        <n-modal v-model:show="showAutoFullscreen" :mask-closable="false">
          <div style="width: 90vw; height: 90vh;">
            <FullscreenView 
              title="自动全屏演示" 
              :auto-enter="true"
              @fullscreen-change="handleFullscreenChange"
            >
              <div class="demo-content auto">
                <n-icon size="80" color="#f59e0b">
                  <Zap />
                </n-icon>
                <h2>自动全屏模式</h2>
                <p>组件自动进入全屏状态</p>
                <n-countdown 
                  :duration="30 * 1000" 
                  :active="isAutoFullscreen"
                  @finish="showAutoFullscreen = false"
                />
                <p>30秒后自动关闭演示</p>
              </div>
            </FullscreenView>
          </div>
        </n-modal>
      </div>

      <!-- 自定义内容全屏演示 -->
      <div class="demo-card">
        <h3>自定义内容全屏</h3>
        <p>在全屏模式下显示复杂的自定义内容</p>
        <FullscreenView title="学习仪表板">
          <template #title>
            <div class="custom-title">
              <n-icon size="24" color="#3b82f6">
                <Dashboard />
              </n-icon>
              <span>学习仪表板 - 全屏模式</span>
            </div>
          </template>
          
          <div class="demo-content dashboard">
            <div class="dashboard-grid">
              <div class="dashboard-card">
                <h4>今日学习</h4>
                <div class="stat-number">4.5</div>
                <div class="stat-label">小时</div>
              </div>
              
              <div class="dashboard-card">
                <h4>完成题目</h4>
                <div class="stat-number">23</div>
                <div class="stat-label">道</div>
              </div>
              
              <div class="dashboard-card">
                <h4>学习天数</h4>
                <div class="stat-number">156</div>
                <div class="stat-label">天</div>
              </div>
              
              <div class="dashboard-card">
                <h4>掌握度</h4>
                <div class="stat-number">87%</div>
                <div class="stat-label">完成</div>
              </div>
            </div>
            
            <div class="progress-section">
              <h4>学习进度</h4>
              <div class="progress-item">
                <span>算法基础</span>
                <n-progress type="line" :percentage="85" color="#10b981" />
              </div>
              <div class="progress-item">
                <span>数据结构</span>
                <n-progress type="line" :percentage="72" color="#3b82f6" />
              </div>
              <div class="progress-item">
                <span>系统设计</span>
                <n-progress type="line" :percentage="45" color="#f59e0b" />
              </div>
            </div>
          </div>
        </FullscreenView>
      </div>

      <!-- 媒体内容全屏演示 -->
      <div class="demo-card">
        <h3>媒体内容全屏</h3>
        <p>适合视频、图片等媒体内容的全屏显示</p>
        <FullscreenView title="媒体播放器">
          <div class="demo-content media">
            <div class="media-player">
              <div class="video-placeholder">
                <n-icon size="120" color="#ef4444">
                  <PlayerPlay />
                </n-icon>
                <h3>视频播放器</h3>
                <p>全屏模式下的媒体播放体验</p>
              </div>
              
              <div class="media-controls">
                <n-button-group>
                  <n-button>
                    <template #icon>
                      <n-icon><PlayerSkipBack /></n-icon>
                    </template>
                  </n-button>
                  <n-button type="primary">
                    <template #icon>
                      <n-icon><PlayerPlay /></n-icon>
                    </template>
                  </n-button>
                  <n-button>
                    <template #icon>
                      <n-icon><PlayerSkipForward /></n-icon>
                    </template>
                  </n-button>
                </n-button-group>
              </div>
            </div>
          </div>
        </FullscreenView>
      </div>
    </div>

    <!-- 功能说明 -->
    <div class="feature-section">
      <h2>功能特性</h2>
      <div class="feature-grid">
        <div class="feature-item">
          <n-icon size="32" color="#10b981">
            <DeviceDesktop />
          </n-icon>
          <h4>跨浏览器兼容</h4>
          <p>支持Chrome、Firefox、Safari、Edge等主流浏览器的全屏API</p>
        </div>
        
        <div class="feature-item">
          <n-icon size="32" color="#3b82f6">
            <Keyboard />
          </n-icon>
          <h4>键盘快捷键</h4>
          <p>支持ESC退出全屏，F11切换全屏，提供便捷的操作体验</p>
        </div>
        
        <div class="feature-item">
          <n-icon size="32" color="#f59e0b">
            <Responsive />
          </n-icon>
          <h4>响应式设计</h4>
          <p>自适应不同屏幕尺寸，在移动设备和桌面设备上都有良好表现</p>
        </div>
        
        <div class="feature-item">
          <n-icon size="32" color="#ef4444">
            <Settings />
          </n-icon>
          <h4>高度可定制</h4>
          <p>支持自定义标题、内容、样式，满足不同场景的使用需求</p>
        </div>
      </div>
    </div>

    <!-- 使用说明 -->
    <div class="usage-section">
      <h2>使用方法</h2>
      <n-card>
        <n-code language="vue" :code="usageCode" />
      </n-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FullscreenView from '@/components/common/FullscreenView.vue'
import {
  Maximize,
  Zap,
  Dashboard,
  PlayerPlay,
  PlayerSkipBack,
  PlayerSkipForward,
  DeviceDesktop,
  Keyboard,
  Settings
} from '@vicons/tabler'

// 响应式图标（这里用设置图标代替）
const Responsive = Settings

const showAutoFullscreen = ref(false)
const isAutoFullscreen = ref(false)

const handleFullscreenChange = (fullscreen: boolean) => {
  isAutoFullscreen.value = fullscreen
  if (!fullscreen) {
    showAutoFullscreen.value = false
  }
}

const usageCode = `<template>
  <!-- 基础用法 -->
  <FullscreenView title="我的全屏应用">
    <div>这里是全屏显示的内容</div>
  </FullscreenView>

  <!-- 自动进入全屏 -->
  <FullscreenView :auto-enter="true" @fullscreen-change="handleChange">
    <div>自动进入全屏的内容</div>
  </FullscreenView>

  <!-- 自定义标题 -->
  <FullscreenView>
    <template #title>
      <div class="custom-title">
        <Icon />
        <span>自定义标题</span>
      </div>
    </template>
    <div>内容区域</div>
  </FullscreenView>
</template>

<script setup>
import FullscreenView from '@/components/common/FullscreenView.vue'

const handleChange = (isFullscreen) => {
  console.log('全屏状态:', isFullscreen)
}
</script>`
</script>

<style scoped>
.fullscreen-demo {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-header {
  text-align: center;
  margin-bottom: 48px;
}

.demo-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}

.demo-header p {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.demo-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.demo-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.demo-card p {
  color: #6b7280;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.demo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  height: 100%;
  min-height: 300px;
}

.demo-content h2 {
  margin: 16px 0 8px 0;
  font-size: 24px;
  font-weight: 700;
}

.demo-content p {
  margin: 0 0 16px 0;
  opacity: 0.9;
  font-size: 16px;
}

.feature-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.custom-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
  width: 100%;
  max-width: 600px;
}

.dashboard-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  backdrop-filter: blur(10px);
}

.dashboard-card h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  opacity: 0.8;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.7;
}

.progress-section {
  width: 100%;
  max-width: 400px;
}

.progress-section h4 {
  margin: 0 0 16px 0;
  text-align: center;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.progress-item span {
  min-width: 80px;
  font-size: 14px;
}

.media-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.video-placeholder h3 {
  margin: 0;
  font-size: 24px;
}

.video-placeholder p {
  margin: 0;
  opacity: 0.8;
}

.feature-section {
  margin-bottom: 48px;
}

.feature-section h2 {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.feature-item {
  text-align: center;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.feature-item h4 {
  margin: 16px 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.feature-item p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
}

.usage-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .fullscreen-demo {
    padding: 16px;
  }
  
  .demo-grid {
    grid-template-columns: 1fr;
  }
  
  .demo-header h1 {
    font-size: 24px;
  }
  
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .demo-card {
    padding: 16px;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}
</style>